<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
//引入pinia
// import {useStore} from '@/stores/modules/user'
// const usestore = useStore()
// console.log(usestore);

//获取班级老师和班级号
const userA = JSON.parse(localStorage.getItem('user')!)
console.log(userA);

//引入底部封装
import Interaction from '@/components/Interaction.vue';
//引入分享数据封装
import ClassPages from '@/views/Main/ClassPage/ClassPages.vue'
// 假设的学生数据 
const students = ref([
   { id: 1, name: '刘帅雄' },
   { id: 2, name: '刘帅浩' },
   { id: 3, name: '王晨' },
   { id: 4, name: '于小龙' },
   { id: 5, name: '赵石' },
   { id: 6, name: '陈紫恒' },
])
//作品数 点赞数 等数据
const opus = ref([
   { id: 1, name: '作品数', num: 0 },
   { id: 2, name: '点赞数', num: 481 },
   { id: 3, name: '评论数', num: 48 },
])
//button按钮
const press = ref([
   { id: 1, name: '公开分享作品' },
   { id: 2, name: '班内分享作品' }
])
//模拟音乐数据
let originalShares = ref([
  {
    id: 1,
    userId: 1001,
    title: "欢乐颂",
    author: '小王老师',
    position: '一班',
    catalogue: '编辑区',
    like: 0,
    type: '热门',
    time: '2024-5-18',
    teacher: '小王老师',
    comment: 0,
    lastEditTime: '2020-01-01',
    tempo: 4 / 4,
    speed: 1.0,
    notes: [
      { pitch: 'C4', duration: 0.5 },
      { pitch: 'D4', duration: 0.5 },
      { pitch: 'E4', duration: 0.5 },
      { pitch: 'E4', duration: 0.5 },
    ],
    commentList: [
      // {id:1,comment:'好棒',name:'王鼎老师',rate:'5'}
    ]
  },
  {
    id: 2,
    userId: 1,
    title: "嘿嘿嘿",
    author: '张三',
    position: '一班',
    catalogue: '编辑区',
    like: 0,
    type: '',
    time: '2024-5-18',
    teacher: '小王老师',
    comment: 0,
    lastEditTime: '2020-01-01',
    tempo: 4 / 4,
    speed: 1.0,
    notes: [
      { pitch: 'C4', duration: 0.5 },
      { pitch: 'D4', duration: 0.5 },
      { pitch: 'E4', duration: 0.5 },
      { pitch: 'E4', duration: 0.5 },
    ],
    commentList: [
      // {fromId:1,comment:'好棒',name:'王鼎老师',rate:'5'}
    ]
  },
]);
//存储分享数据
const studentsUp = ref([])


// 控制学生列表是否展开  
const isExpanded = ref(false);

//控制箭头的显示隐藏
const arrowhead = ref(true)
const arrowheadBottom = ref(false)
//点击显示所有学生
const dot = () => {
   // console.log(111);
   isExpanded.value = true
   arrowhead.value = false
   arrowheadBottom.value = true
}
//点击关闭所有学生
const dotBottom = () => {
   isExpanded.value = false
   arrowhead.value = true
   arrowheadBottom.value = false
}

// 下拉选项数据  
interface iSelectArr {
   id: number;
   value: string;
   label: string;
}
const selectArr = ref<iSelectArr[]>([
   { id: 1, value: "自定义分组一", label: "自定义分组一" },
   { id: 2, value: "自定义分组二", label: "自定义分组二" },
   { id: 3, value: "自定义分组三", label: "自定义分组三" },
   { id: 4, value: "自定义分组四", label: "自定义分组四" },
]);
const isAdding = ref(false);
const optionName = ref("");
const onAddOption = () => {
   isAdding.value = true;
};

const onConfirm = () => {
   if (optionName.value) {
      selectArr.value.push({
         id: optionName.value.length + 1,
         label: optionName.value,
         value: optionName.value,
      });
      clear();
   }
};

const clear = () => {
   optionName.value = "";
   isAdding.value = false;
};
let delId = ref({ id: 0, value: "全部", label: "全部" });
const clearArr = (data: iSelectArr) => {
   delId.value = data;
   // nextTick(() => {

   console.log("selectArr.value: ", selectArr.value);
   // if (formInline.value.selectReg == data.value) {
   selectArr.value = selectArr.value.filter((item) => item.id !== data.id);
   formInline.value.selectReg = "";
   // }

   console.log(
      "189",
      formInline.value.selectReg,
      "---formInline.value.selectReg"
   );
   // });
};
const onSelect = (data: iSelectArr) => {
   console.log(data, "onSelect");
};
const selectChange = () => {
   if (formInline.value.selectReg == delId.value.label) {
      selectArr.value = selectArr.value.filter(
         (item) => item.id !== delId.value.id
      );
      formInline.value.selectReg = "";
   }
};




//高亮
const type = ref('4')
const Ids = ref(0)
const select = (id: any) => {
   Ids.value = id
   if(Ids.value == 0){
       type.value = '4'
   }else if(Ids.value == 1){
       type.value = '6'
   }
}
// 搜索数据
const formInline = ref({
   status: 0,
   user: "",
   selectReg: "",
   date: "",
});
//搜索功能
const Share = ref(originalShares.value.slice()); // 初始时复制一份原始数据给Share  
const onSubmit = () => {
   if (formInline.value.date !== '') {
      const itemIndex = originalShares.value.filter(item => item.title.includes(formInline.value.date));
      Share.value = itemIndex
   } else {
      alert('输入框不能为空')
   }
   // watch(() => formInline.value.date, (newValue, oldValue) => {
   //    if (newValue === '') { 
   //       Share.value = originalShares.value.slice();
   //    }
   // }, { deep: true });
};

// 更新opus中id为1的对象的num属性为Share数组的长度  
function updateOpusNum() {
   // 遍历opus数组以找到id为1的对象  
   opus.value.forEach(item => {
      if (item.id === 1) {
         // 更新num属性为Share数组的长度  
         item.num = Share.value.length;
      }
   });
}
// 调用函数来更新opus  
updateOpusNum();

// 函数来计算所有Share对象的like总和，并更新opus中id为2的对象的num属性  
function updateTotalLikesInOpus() {
   let totalLikes = 0;
   // 遍历Share数组来累加like属性  
   Share.value.forEach(share => {
      totalLikes += share.like;
   });
   // 更新opus中id为2的对象的num属性  
   opus.value.forEach(item => {
      if (item.id === 2) {
         item.num = totalLikes;
      }
   });
}
// 调用函数来更新opus  
updateTotalLikesInOpus();

// 函数来计算所有Share对象的comment总和，并更新opus中id为3的对象的num属性  
function updateTotalcommentsInOpus() {
   let totalLikes = 0;
   // 遍历Share数组来累加comment属性  
   Share.value.forEach(share => {
      totalLikes += share.comment;
   });
   // 更新opus中id为3的对象的num属性  
   opus.value.forEach(item => {
      if (item.id === 3) {
         item.num = totalLikes;
      }
   });
}
// 调用函数来更新opus  
updateTotalcommentsInOpus();


</script>
<template>
   <div class='classPage'>
      <div class="classPage_detail">
         <div class="classPage_detail_left">
            <p class="long">
               <span>班级：</span>
               <span v-if="userA.EditeScore == 0" v-for="item in userA.ManageClass" :key="item.id">{{ item.name
                  }}</span>
               <span v-if="userA.EditeScore == 1">{{ userA.class }}</span>
            </p>
            <div class="long_sing">
               <div>
                  <span>指导老师：</span>
                  <span>{{ userA.nickname }}</span>
               </div>
               <div class="Drop_down">
                  <span>班级成员：</span>
                  <div>
                     <p>
                        {{ students.length > 0 ? students[0].name : '无学生' }}
                        {{ students.length > 1 ? ', ' + students[1].name : '' }}
                     </p>
                  </div>
                  <el-icon :size="40" @click="dot" v-if="arrowhead">
                     <CaretBottom />
                  </el-icon>
                  <el-icon :size="40" @click="dotBottom" v-if="arrowheadBottom">
                     <CaretTop />
                  </el-icon>
               </div>
            </div>
         </div>
         <div class="classPage_detail_right">
            <div v-for="item in opus" :key="item.id">
               <p>{{ item.name }}</p>
               <p>{{ item.num }}</p>
            </div>
         </div>
      </div>
   </div>
   <!--所有学生-->
   <div v-if="isExpanded">
      <ul>
         <li v-for="student in students" :key="student.id">{{ student.name }}</li>
      </ul>
   </div>
   <!--中间切换搜索部分-->
   <div class="encapsulation">
      <div class="encapsulation_top">
         <button :class="{ active: Ids === 0 }" @click="select(0)">{{ press[0].name }}</button>
         <button :class="{ active: Ids === 1 }" @click="select(1)">{{ press[1].name }}</button>
         <el-form-item>
            <el-select v-model="formInline.selectReg" placeholder="请选择" style="width: 240px" @change="selectChange">
               <el-option value="全部">全部</el-option>
               <el-option class="option" :value="item.value" v-for="item in selectArr" :key="item.id"><span
                     style="float: left" @click="onSelect(item)">{{
                        item.label
                     }}</span>
                  <span style="float: right" @click="clearArr(item)">
                     <el-icon>
                        <CloseBold />
                     </el-icon> </span></el-option>
               <template #footer>
                  <el-button v-if="!isAdding" text bg size="small" @click="onAddOption">
                     新建分组
                  </el-button>
                  <template v-else>
                     <el-input v-model="optionName" class="option-input" placeholder="请输入新的分支" size="small"
                        style="margin-bottom: 7px" />
                     <div>
                        <el-button type="primary" size="small" @click="onConfirm">
                           确定
                        </el-button>
                        <el-button size="small" @click="clear">取消</el-button>
                     </div>
                  </template>
               </template>
            </el-select>
         </el-form-item>
      </div>
      <div class="SearchBottom">
         <el-input v-model="formInline.date" style="width: 110px" placeholder="请输入" />
         <button @click="onSubmit">搜索</button>
      </div>
   </div>
   <!--封装的音乐组件-->
   <Interaction :Share="Share" :type="type" v-if="Ids == 0"/>
   <ClassPages v-if="Ids == 1"/>
</template>
<style scoped>
.encapsulation_top .active {
   color: rgb(43, 150, 204);
   border: 1px solid rgb(0, 195, 255);
}

.SearchBottom {
   display: flex;
   height: 150px;
   padding: 0 0 0 20px;
   align-items: flex-end;
}

.SearchBottom button {
   border: 0;
   width: 60px;
   height: 32px;
   background-color: rgb(134, 235, 235);
   color: #fff;
   margin-left: 10px;
}

.encapsulation_top {
   display: flex;
}

.encapsulation_top button {
   height: 30px;
   border: 0;
   background-color: #fff;
   border: 1px solid #ccc;
   width: 150px;
   margin-left: 20px;
}

.encapsulation {
   width: 100%;
   height: 200px;
}

.Drop_down {
   display: flex;
   align-items: center;
}

.classPage_detail_left {
   width: 50%;
}

.classPage_detail_right div {
   width: 80px;
   height: 60px;
   text-align: center;
   border-right: 1px solid #ccc;
}

.classPage_detail_right :nth-child(3) {
   border: 0;
}

.classPage_detail_right {
   display: flex;
   height: 90%;
   align-items: flex-end;
}

.long_sing {
   height: 100px;
   line-height: 30px;
}

.long {
   height: 80px;
   line-height: 70px;
}

.classPage_detail {
   height: 100%;
   width: 100%;
   display: flex;
   justify-content: space-between;
}

.classPage {
   height: 160px;
   background-color: #fff;
   padding: 0 10px 0 10px;
}
</style>